<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<title>贵美商城</title>
 <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
 <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
<script type="text/JavaScript" src="js/jquery.js"></script>
<script type="text/javascript">
	
	
	$(function(){
		var flag = false;
		
		var code = "";
		var codeLength = 4;
		var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 
					'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L','M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
					'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
		for(var i = 0; i < codeLength; i++){
			var charIndex = Math.floor(Math.random() * 32);	
			code += selectChar[charIndex];
		}	
		$("#checkCode").val(code);
		
		$("#userName").blur(function(){
			flag = true;
			var userName = $("#userName").val();
			if(userName.length == 0){
				$("#unerror").html("<font color='red'>&nbsp;&nbsp请输入用户名</font>");
				flag = false;
			}
		});
		$("#userName").focus(function(){
			$("#unerror").html(" ");
		});
		
		$("#password").blur(function(){
			flag = true;
			var password = $("#password").val();
			if(password.length == 0){
				$("#pwerror").html("<font color='red'>&nbsp;&nbsp请输入密码</font>");
				flag = false;
			}
		});
		$("#password").focus(function(){
			$("#pwerror").html(" ");
		});
		
		$("#input1").blur(function(){
			inputCode = $("#input1").val();
			flag = true;
			if (inputCode.length == 0) {
				$("#error").html("<font color='red'>&nbsp;&nbsp请输入验证码！</font>");
				flag = false;
			}
			if (inputCode != code) {
				$("#error").html("<font color='red'>&nbsp;&nbsp验证码输入错误！</font>");
				flag = false;
			}
		});
		$("#input1").focus(function(){
			$("#error").html(" ");
		});
		

		$("#but").click(function(){
			code = "";
			for(var i = 0; i < codeLength; i++){
				var charIndex = Math.floor(Math.random() * 32);	
				code += selectChar[charIndex];
			}	
			$("#checkCode").val(code);
		});
	});
	
	
	function subform(){
		alert(flag);
		if(flag){
			document.form1.submit();
		}
	}
</script> 	
</head>
<body>
<div id="container">
	<iframe id="header" src="header.jsp" width="980" height="136" frameborder="0" scrolling="no"></iframe>
	<form action="loginAction" method="post" name="form1">
	<div class="login">
		<ul class="form f_l">
			<h3><img src="images/logintitle.gif" alt="会员登录" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${errorInfo }</h3>
			<li><span id="error" style="margin-left: 200px;"></span></li>
			<li class="login_list">
			<label>会员名：</label><input type="text" id="userName" name="userInfo.UserName" /><span id="unerror"></span></li>
			<li class="login_list">
			<label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="password" name="userInfo.password" /><span id="pwerror"></span></li>
			<li class="login_list">
			<label>验证码：</label><input type="text" id="input1" style="widows: 60px" />
			    <input type="text" id="checkCode" class="code" style="width:60px" disabled="disabled" value=""/>
			    <button type="button" id="but">换一张</button>
			</li>
			<li class="login_list">
			
			</li>
			  <li class="a_c">
			  		<button onclick="subform()" style="width:85px;padding-left:0px;height: 40px;padding-top: -20px"><img src="images/login.gif"/></button>
			  </li>
			<li class="desc">&delta;&nbsp;&nbsp;<a href="#">什么是安全登录</a>。</li>
			<li class="desc">&delta;&nbsp;&nbsp;香港會員（繁體中文用戶）由此<a href="#">登入</a></li>
			<li class="desc">&delta;&nbsp;&nbsp;<a href="#">密码安全贴士</a></li>
			<li class="desc">&delta;&nbsp;&nbsp;防止病毒或者木马窃取您的账户信息，<a href="#">在线检查</a>您的电脑是否安全。</li>						
		</ul>
			<h1><img src="images/register.gif" alt="注册会员" /></h1>
		<ul class="aside f_l">
			<li class="regpic"><span>便宜有好货！</span>超过7000万件商品任您选。</li>
		 	<li class="regpic regpic2"><span>买卖更安全！</span>交易超安全。</li>
			<li class="regpic regpic3"><span>免费开网店！</span>轻松赚钱交友。</li>
			<li class="regpic regpic4"><span>超人气社区！</span>彩活动每一天</li>
			<li class="a_c"><a href="register.jsp"><img src="images/registernow.gif" alt="现在就注册" /></a></li>
			<ul class="reged">
			<li class="regpic regpic5">您已经是会员？<a href="#">由此登入</a></li>
			<li class="regpic regpic6">繁体中文用户由此<a href="#">注册</a></li>
			</ul>
		</ul>
	</div>
	</form>
	<iframe id="footer" src="footer.jsp" width="980" height="136" frameborder="0" scrolling="no"></iframe>
</div> <!--container end-->	
</body>
</html>
